<div id="navContainer">
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <!-- COLLAPSE BUTTON -->
                <button class="btn btn-navbar" type="button" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- BRAND -->
                <a class="brand" data-bind="attr: { href: currentUserID() ? '#overview' : '#'}">Melon</a>
                <!-- LOGGED USER MENU -->
                <div class="nav-collapse collapse" data-bind="visible: currentUserID">
                    <!-- PAGES -->
                    <ul class="nav" data-bind="foreach: pages">
                        <li data-bind="attr: { class: $data == $parent.currentPage() ? 'active' : '' }">
                            <a data-bind="text: $data, click: $parent.gotoPage"></a>
                        </li>
                    </ul>
                    <form id="logoutForm" class="navbar-form pull-right" method="post" action="ss/controller.php">
                        <button id="logoutBtn" class="btn" data-bind="click: logout">Sign out</button>
                    </form>
                </div>
                <!-- DEFAULT MENU -->
                <div class="nav-collapse collapse" data-bind="visible: !currentUserID()">
                    <!-- LOGIN FORM -->
                    <form id="loginForm" class="navbar-form pull-right" method="post" action="ss/controller.php">
                        <input id="loginMail" class="span2" type="text" placeholder="Email" data-bind="click: hidePopover">
                        <input id="loginPass" class="span2" type="password" placeholder="Password" data-bind="click: hidePopover">
                        <button id="loginBtn" type="submit" class="btn" data-bind="click: login">Sign in</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>